<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国</div>
</div>
</body>
<script>
    const root = document.querySelector("#root");
    const btns = root.querySelectorAll("button");
    const divs = root.querySelectorAll("div");
    let activeI = 0;
    init();
    function init(){
        for (let i = 0; i < btns.length; i++) {
            hide(i);
            btns[i].onclick = function () {
                if(i===activeI) return;
                console.log(i);
                hide();
                activeI = i;
                show();
            }
        }
        show();
    }
    function hide(i=activeI) {
        btns[i].className = null;
        divs[i].style.display = "none";
    }
    function show() {
        btns[activeI].className = "active";
        divs[activeI].style.display = "block";
    }
</script>
</html>